<template>
  <view class="home-page">
    <!-- 顶部健康指数多环进度条区域 -->
    <view class="progress-section">
      <multi-circle-progress :progressData="healthProgressData" :size="200" :lineWidth="12" :animationDuration="1000"
        labelPosition="center" :labelStyle="{ fontSize: '14px', color: '#333' }" :hoverEffect="true" :showDetails="true"
        @click="handleHealthIndexClick" />
      <view class="health-stats">
        <text class="health-score">{{ healthIndex.total }}</text>
        <text class="health-title">健康指数</text>
      </view>
      <view class="health-details">
        <view class="health-item" :class="{ 'completed': healthIndex.water.score > 0 }">
          <image src="/static/icons/water-drop.png" class="health-icon"></image>
          <text>饮水</text>
          <text class="item-score">{{ healthIndex.water.weightedScore }}%</text>
        </view>
        <view class="health-item" :class="{ 'completed': healthIndex.mood.score > 0 }">
          <image src="/static/icons/mood.png" class="health-icon"></image>
          <text>情绪</text>
          <text class="item-score">{{ healthIndex.mood.weightedScore }}%</text>
        </view>
        <view class="health-item" :class="{ 'completed': healthIndex.sleep.score > 0 }">
          <image src="/static/icons/sleep.png" class="health-icon"></image>
          <text>睡眠</text>
          <text class="item-score">{{ healthIndex.sleep.weightedScore }}%</text>
        </view>
        <view class="health-item" :class="{ 'completed': healthIndex.toilet.score > 0 }">
          <image src="/static/icons/toilet.png" class="health-icon"></image>
          <text>如厕</text>
          <text class="item-score">{{ healthIndex.toilet.weightedScore }}%</text>
        </view>
      </view>
    </view>

    <!-- 中部按钮区域 - 核心功能 -->
    <view class="action-grid">
      <button class="action-btn drink-btn" @click="recordDrink" :class="{ 'btn-active': isButtonActive === 'drink' }"
        @touchstart="activateButton('drink')" @touchend="deactivateButton">
        <image src="/static/icons/water-drop.png" class="btn-icon"></image>
        <text>喝一杯水</text>
        <text class="btn-desc">+250ml</text>
      </button>

      <button class="action-btn toilet-btn" @click="recordToilet" :class="{ 'btn-active': isButtonActive === 'toilet' }"
        @touchstart="activateButton('toilet')" @touchend="deactivateButton">
        <image src="/static/icons/toilet.png" class="btn-icon"></image>
        <text>记录如厕</text>
        <text class="btn-desc">{{ toiletCount }}次</text>
      </button>

      <button class="action-btn mood-btn" @click="showMoodSelector = true"
        :class="{ 'btn-active': isButtonActive === 'mood' }" @touchstart="activateButton('mood')"
        @touchend="deactivateButton">
        <image src="/static/icons/mood.png" class="btn-icon"></image>
        <text>情绪日记</text>
        <text class="btn-desc">{{ todayMood ? getMoodText(todayMood) : '未记录' }}</text>
      </button>

      <button class="action-btn sleep-btn" @click="showSleepSelector = true"
        :class="{ 'btn-active': isButtonActive === 'sleep' }" @touchstart="activateButton('sleep')"
        @touchend="deactivateButton">
        <image src="/static/icons/sleep.png" class="btn-icon"></image>
        <text>睡眠质量</text>
        <text class="btn-desc">{{ todaySleep ? getSleepText(todaySleep) : '未记录' }}</text>
      </button>
    </view>

    <!-- 情绪和睡眠选择器弹窗 -->
    <u-popup v-model:show="showMoodSelector" mode="center" width="80%" height="auto">
      <view class="selector-popup">
        <mood-selector @select="recordMood" />
      </view>
    </u-popup>

    <u-popup v-model:show="showSleepSelector" mode="center" width="80%" height="auto">
      <view class="selector-popup">
        <sleep-selector @select="recordSleep" />
      </view>
    </u-popup>

    <!-- 底部运势区域 -->
    <view class="fortune-section">
      <view class="fortune-header">
        <text class="fortune-title">今日运势</text>
        <text class="fortune-unlock-tip" v-if="!fortuneUnlocked">完成记录解锁完整运势</text>
        <text class="fortune-unlocked" v-else>已解锁</text>
      </view>

      <view class="fortune-content">
        <view class="fortune-preview" v-if="!fortuneUnlocked"> {{ fortunePreview }}... </view>
        <view class="fortune-full" v-else>
          {{ fortuneContent }}
        </view>
      </view>
    </view>

    <!-- 目标设置弹窗 -->
    <u-popup v-model:show="showGoalInput" type="dialog">
      <view class="goal-input-popup">
        <input type="number" v-model="inputGoal" placeholder="请输入目标饮水量(ml)" class="goal-input" />
        <button type="primary" @click="setGoal">确定</button>
      </view>
    </u-popup>

    <!-- 健康指数详情弹窗 -->
    <u-popup v-model:show="showHealthDetails" type="dialog">
      <view class="health-details-popup">
        <health-index-details ref="healthDetails" />
        <button type="primary" @click="showHealthDetails = false">关闭</button>
      </view>
    </u-popup>

    <float-button />
  </view>
</template>

<script>
import { getShareAppMessageConfig, getShareTimelineConfig } from '../../utils/share.js'
import FloatButton from '../../components/FloatButton.vue'
import WaterProgress from '../../components/WaterProgress.vue'
import MultiCircleProgress from '../../components/MultiCircleProgress.vue'
import MoodSelector from '../../components/MoodSelector.vue'
import SleepSelector from '../../components/SleepSelector.vue'
import HealthIndexDetails from '../../components/HealthIndexDetails.vue'
import {
  getLocalOpenid,
  getDrinkRecords,
  saveDrinkRecord,
  getDrinkGoal,
  setDrinkGoal,
  getTodayDrinkAmount,
  getYesterdayDrinkAmount,
  formatDate,
  getToiletRecords,
  saveToiletRecord,
  getTodayToiletCount,
  saveMoodRecord,
  getTodayMood,
  saveSleepRecord,
  getTodaySleep
} from '../../utils/storage.js'
import { getHealthIndexDetails, getHealthIndexProgressData } from '../../utils/healthIndex.js'

export default {
  components: {
    FloatButton,
    WaterProgress,
    MultiCircleProgress,
    MoodSelector,
    SleepSelector,
    HealthIndexDetails
  },
  data() {
    return {
      waterData: {
        today: 0,
        yesterday: 0,
        goal: 2000
      },
      toiletCount: 0,
      showGoalInput: false,
      showHealthDetails: false,
      showMoodSelector: false,
      showSleepSelector: false,
      isButtonActive: null,
      inputGoal: '',
      fortuneUnlocked: false,
      fortuneContent:
        '今天是个好日子，适合多喝水。保持良好的饮水习惯有助于身体健康，提高工作效率。记得定时起身活动，保持身心愉悦。',
      fortunePreview: '今天是个好日子，适合多喝水',
      // 情绪和睡眠相关
      todayMood: null,
      todaySleep: null,
      healthIndex: {
        total: 0,
        water: { score: 0, weightedScore: 0, percentage: 0 },
        mood: { score: 0, weightedScore: 0, hasRecord: false, type: null },
        sleep: { score: 0, weightedScore: 0, hasRecord: false, quality: null },
        toilet: { score: 0, weightedScore: 0, hasRecord: false, count: 0 }
      },
      healthProgressData: [],
      // 动画相关
      animationData: null,
      audioContext: null
    }
  },
  computed: {
    waterPercent() {
      return Math.min(100, Math.round((this.waterData.today / this.waterData.goal) * 100))
    }
  },
  onLoad() {
    // 初始化音频上下文
    this.audioContext = uni.createInnerAudioContext()
    this.audioContext.src = '/static/sounds/water-drop.mp3'

    // 加载用户数据
    this.loadUserData()

    // 检查是否需要解锁运势
    this.checkFortuneUnlock()
  },
  onShow() {
    // 每次页面显示时刷新数据
    this.loadUserData()
  },
  // 分享到聊天
  onShareAppMessage() {
    return getShareAppMessageConfig({
      title: '喝水记录打卡 - 安记录丨工具舱',
      path: '/pages/index/index',
      imageUrl: '/static/share-img.png'
    })
  },
  // 分享到朋友圈
  onShareTimeline() {
    return getShareTimelineConfig({
      title: '喝水记录打卡 - 安记录丨工具舱',
      imageUrl: '/static/share-img.png'
    })
  },
  methods: {
    // 按钮动画相关方法
    activateButton(type) {
      this.isButtonActive = type;
    },
    deactivateButton() {
      this.isButtonActive = null;
    },
    // 加载用户数据
    loadUserData() {
      // 获取饮水数据
      this.waterData.today = getTodayDrinkAmount()
      this.waterData.yesterday = getYesterdayDrinkAmount()
      this.waterData.goal = getDrinkGoal()

      // 获取如厕记录
      this.toiletCount = getTodayToiletCount()

      // 获取情绪记录
      const moodRecord = getTodayMood()
      this.todayMood = moodRecord ? moodRecord.type : null

      // 获取睡眠记录
      const sleepRecord = getTodaySleep()
      this.todaySleep = sleepRecord ? sleepRecord.quality : null

      // 获取健康指数
      this.healthIndex = getHealthIndexDetails()
      this.healthProgressData = getHealthIndexProgressData()

      // 检查是否解锁运势
      this.checkFortuneUnlock()

      // 刷新健康指数详情组件
      this.$nextTick(() => {
        if (this.$refs.healthDetails) {
          this.$refs.healthDetails.refresh()
        }
      })
    },

    // 记录喝水
    recordDrink() {
      const amount = 250 // 默认一杯水250ml
      const now = new Date()
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')

      // 创建新记录
      const newRecord = {
        date: formatDate(now),
        time: `${hours}:${minutes}`,
        type: 'water', // 默认为白开水
        amount: amount
      }

      // 保存到本地存储
      saveDrinkRecord(newRecord)

      // 更新页面数据
      this.waterData.today += amount

      // 更新健康指数
      this.healthIndex = getHealthIndexDetails()
      this.healthProgressData = getHealthIndexProgressData()

      // 播放音效
      this.playWaterSound()

      // 执行动画
      this.playAddWaterAnimation()

      // 检查是否解锁运势
      this.checkFortuneUnlock()

      // 显示成功提示
      uni.showToast({
        title: '记录成功！',
        icon: 'success'
      })
    },

    // 记录如厕
    recordToilet() {
      const now = new Date()
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')

      // 创建新记录
      const newRecord = {
        date: formatDate(now),
        time: `${hours}:${minutes}`
      }

      // 保存到本地存储
      saveToiletRecord(newRecord)

      // 更新页面数据
      this.toiletCount++

      // 更新健康指数
      this.healthIndex = getHealthIndexDetails()
      this.healthProgressData = getHealthIndexProgressData()

      // 检查是否解锁运势
      this.checkFortuneUnlock()

      // 显示成功提示
      uni.showToast({
        title: '记录成功！',
        icon: 'success'
      })
    },

    // 设置目标
    setGoal() {
      if (!this.inputGoal || Number(this.inputGoal) <= 0) {
        uni.showToast({
          title: '请输入有效的目标量',
          icon: 'none'
        })
        return
      }

      const goal = Number(this.inputGoal)

      // 保存目标
      setDrinkGoal(goal)

      // 更新页面数据
      this.waterData.goal = goal

      // 关闭弹窗
      this.showGoalInput = false

      // 清空输入
      this.inputGoal = ''

      // 显示成功提示
      uni.showToast({
        title: '目标设置成功！',
        icon: 'success'
      })
    },

    // 检查是否解锁运势
    checkFortuneUnlock() {
      // 当健康指数达到60分时解锁运势
      if (this.healthIndex.total >= 60) {
        this.fortuneUnlocked = true
      }
    },

    // 处理健康指数点击事件
    handleHealthIndexClick() {
      this.showHealthDetails = true
    },

    // 处理健康指数点击事件
    handleHealthIndexClick() {
      this.showHealthDetails = true
    },

    // 播放水滴音效
    playWaterSound() {
      if (this.audioContext) {
        this.audioContext.stop()
        this.audioContext.play()
      }
    },

    // 播放添加水量的动画
    playAddWaterAnimation() {
      const animation = uni.createAnimation({
        duration: 500,
        timingFunction: 'ease'
      })

      // 创建一个放大再缩小的动画
      animation.scale(1.2, 1.2).step()
      animation.scale(1, 1).step()

      this.animationData = animation.export()
    },

    // 记录情绪
    recordMood(type) {
      const now = new Date()
      const hours = String(now.getHours()).padStart(2, '0')
      const minutes = String(now.getMinutes()).padStart(2, '0')

      // 创建新记录
      const newRecord = {
        date: formatDate(now),
        time: `${hours}:${minutes}`,
        type: type // 'happy', 'neutral', 'sad'
      }

      // 保存到本地存储
      saveMoodRecord(newRecord)

      // 更新页面数据
      this.todayMood = type

      // 更新健康指数
      this.healthIndex = getHealthIndexDetails()
      this.healthProgressData = getHealthIndexProgressData()

      // 检查是否解锁运势
      this.checkFortuneUnlock()

      // 显示成功提示
      uni.showToast({
        title: '情绪记录成功！',
        icon: 'success'
      })

      // 关闭选择器弹窗
      this.showMoodSelector = false
    },

    // 记录睡眠质量
    recordSleep(quality) {
      const now = new Date()

      // 创建新记录
      const newRecord = {
        date: formatDate(now),
        quality: quality // 'good', 'normal', 'bad'
      }

      // 保存到本地存储
      saveSleepRecord(newRecord)

      // 更新页面数据
      this.todaySleep = quality

      // 更新健康指数
      this.healthIndex = getHealthIndexDetails()
      this.healthProgressData = getHealthIndexProgressData()

      // 检查是否解锁运势
      this.checkFortuneUnlock()

      // 显示成功提示
      uni.showToast({
        title: '睡眠记录成功！',
        icon: 'success'
      })

      // 关闭选择器弹窗
      this.showSleepSelector = false
    },

    // 获取情绪文本
    getMoodText(moodType) {
      if (!moodType) return '未记录'

      const moodMap = {
        'happy': '开心',
        'excited': '兴奋',
        'neutral': '一般',
        'tired': '疲惫',
        'sad': '低落'
      }

      return moodMap[moodType] || '未知'
    },

    // 获取睡眠文本
    getSleepText(sleepQuality) {
      if (!sleepQuality) return '未记录'

      const sleepMap = {
        'good': '很好',
        'normal': '一般',
        'bad': '很差'
      }

      return sleepMap[sleepQuality] || '未知'
    }
  }
}
</script>

<style lang="scss" scoped>
// page {
//   // background: #f5f5f2 url('/static/images/xuan-paper-bg.png') repeat;
// }

.home-page {
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 进度条区域 */
.progress-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
  padding-bottom: 80rpx;
  /* 增加底部内边距，为多环进度条详情留出空间 */
  position: relative;
  background: linear-gradient(135deg, #f5f7fa, #e4e8f0);
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
}

.health-stats {
  margin-top: 20rpx;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.health-score {
  font-size: 48rpx;
  font-weight: bold;
  color: #4CAF50;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

.health-title {
  font-size: 28rpx;
  color: #666;
  margin-top: 8rpx;
}

.health-details {
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 16rpx;
  padding: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.health-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.5;
  padding: 8rpx;
  border-radius: 8rpx;
  transition: all 0.3s;
}

.health-item.completed {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.5);
}

.health-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 8rpx;
}

.item-score {
  font-size: 20rpx;
  color: #666;
  margin-top: 4rpx;
  font-weight: bold;
}

/* 按钮区域 */
.action-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 40rpx;
}

.action-btn {
  height: 160rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.12);
  position: relative;
  border: none;
  overflow: hidden;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  opacity: 0;
  transition: all 0.3s ease-out;
}

.action-btn.btn-active::before {
  width: 300%;
  height: 300%;
  opacity: 0.6;
}

.action-btn.btn-active {
  transform: scale(0.95);
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.drink-btn {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: none;
}

.toilet-btn {
  background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
  border: none;
}

.mood-btn {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  border: none;
}

.sleep-btn {
  background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  border: none;
}

.selector-popup {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  width: 100%;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.btn-icon {
  width: 80rpx;
  height: 80rpx;
  margin-bottom: 16rpx;
  filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
}

.btn-desc {
  font-size: 24rpx;
  opacity: 0.8;
  margin-top: 8rpx;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
}

/* 运势区域 */
.fortune-section {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.08);
  flex: 1;
  border: 1rpx solid rgba(0, 0, 0, 0.05);
}

.fortune-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 16rpx;
}

.fortune-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  position: relative;
  padding-left: 20rpx;
}

.fortune-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8rpx;
  height: 32rpx;
  background: linear-gradient(to bottom, #ff9800, #f57c00);
  border-radius: 4rpx;
}

.fortune-unlock-tip {
  font-size: 24rpx;
  color: #ff9800;
  background-color: rgba(255, 152, 0, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.fortune-unlocked {
  font-size: 24rpx;
  color: #4caf50;
  background-color: rgba(76, 175, 80, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.fortune-content {
  line-height: 1.8;
  color: #555;
  font-size: 28rpx;
  padding: 20rpx;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 16rpx;
  margin-top: 20rpx;
}

.fortune-preview {
  opacity: 0.8;
  font-style: italic;
  position: relative;
}

.fortune-preview::after {
  content: '🔒';
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 32rpx;
}

.fortune-full {
  animation: fadeIn 0.5s ease;
  position: relative;
}

.fortune-full::after {
  content: '🔓';
  position: absolute;
  right: 0;
  bottom: 0;
  font-size: 32rpx;
  opacity: 0.5;
}

/* 目标输入弹窗 */
.goal-input-popup {
  padding: 40rpx;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20rpx;
}

.goal-input {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 30rpx;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 2rpx 5rpx rgba(0, 0, 0, 0.05);
}

/* 健康指数详情弹窗 */
.health-details-popup {
  padding: 40rpx;
  width: 80vw;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-radius: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
}

.health-details-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
  color: #333;
  position: relative;
  padding-bottom: 20rpx;
}

.health-details-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80rpx;
  height: 4rpx;
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  border-radius: 2rpx;
}

.health-details-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding: 16rpx;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 12rpx;
  transition: all 0.3s ease;
}

.health-details-item:hover {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.health-details-label {
  color: #555;
  font-size: 28rpx;
  display: flex;
  align-items: center;
}

.health-details-value {
  font-weight: bold;
  color: #333;
  font-size: 28rpx;
  background-color: rgba(76, 175, 80, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 10rpx;
}

.health-details-total {
  display: flex;
  justify-content: space-between;
  margin: 30rpx 0;
  font-size: 32rpx;
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(139, 195, 74, 0.1) 100%);
  padding: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(76, 175, 80, 0.2);
}

.health-details-total .health-details-label {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.health-details-total .health-details-value {
  color: #4CAF50;
  font-weight: bold;
  font-size: 36rpx;
  background: linear-gradient(to right, #4CAF50, #8BC34A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.05);
  padding: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.health-score {
  animation: pulse 2s infinite ease-in-out;
}
</style>
